{% extends 'base.html' %}
{% load crispy_forms_tags %}

{% block title %}{{ task.title }} - Task Details{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row">
        <div class="col-md-8">
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h2 class="mb-0">{{ task.title }}</h2>
                    <div>
                        <span class="badge {% if task.status == 'todo' %}bg-secondary{% elif task.status == 'in_progress' %}bg-primary{% else %}bg-success{% endif %} text-capitalize">
                            {{ task.get_status_display }}
                        </span>
                        <span class="badge {% if task.priority == 'low' %}bg-info{% elif task.priority == 'medium' %}bg-warning{% else %}bg-danger{% endif %} text-capitalize">
                            {{ task.get_priority_display }}
                        </span>
                    </div>
                </div>
                <div class="card-body">
                    <div class="mb-4">
                        <h5>Description</h5>
                        <p class="card-text">{{ task.description|linebreaksbr }}</p>
                    </div>
                    
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <h6>Assigned To</h6>
                            <p>{{ task.assigned_to.get_full_name|default:task.assigned_to.username }}</p>
                        </div>
                        <div class="col-md-6">
                            <h6>Due Date</h6>
                            <p>{{ task.due_date|date:"F j, Y"|default:"No due date" }}</p>
                        </div>
                        <div class="col-md-6">
                            <h6>Created By</h6>
                            <p>{{ task.created_by.get_full_name|default:task.created_by.username }}</p>
                        </div>
                        <div class="col-md-6">
                            <h6>Created At</h6>
                            <p>{{ task.created_at|date:"F j, Y H:i" }}</p>
                        </div>
                        {% if task.completed_at %}
                        <div class="col-12">
                            <h6>Completed At</h6>
                            <p>{{ task.completed_at|date:"F j, Y H:i" }}</p>
                        </div>
                        {% endif %}
                    </div>
                    
                    <div class="d-flex gap-2">
                        <a href="{% url 'tasks:task-update' task.pk %}" class="btn btn-primary">
                            <i class="fas fa-edit"></i> Edit
                        </a>
                        <form method="post" action="{% url 'tasks:task-complete' task.pk %}" class="d-inline">
                            {% csrf_token %}
                            <button type="submit" class="btn {% if task.status == 'done' %}btn-warning{% else %}btn-success{% endif %}">
                                <i class="fas {% if task.status == 'done' %}fa-undo{% else %}fa-check{% endif %}"></i>
                                {% if task.status == 'done' %}Mark Incomplete{% else %}Mark Complete{% endif %}
                            </button>
                        </form>
                        <a href="{% url 'tasks:task-delete' task.pk %}" class="btn btn-danger ms-auto">
                            <i class="fas fa-trash"></i> Delete
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- Comments Section -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">Comments</h5>
                </div>
                <div class="card-body">
                    {% if task.comments.all %}
                        {% for comment in task.comments.all %}
                            <div class="card mb-2">
                                <div class="card-body p-3">
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <h6 class="mb-0">
                                            {{ comment.author.get_full_name|default:comment.author.username }}
                                            <small class="text-muted">{{ comment.created_at|timesince }} ago</small>
                                        </h6>
                                        {% if comment.author == request.user or request.user.is_staff %}
                                            <form method="post" action="{% url 'tasks:delete-comment' comment.pk %}" class="d-inline">
                                                {% csrf_token %}
                                                <button type="submit" class="btn btn-sm btn-link text-danger" onclick="return confirm('Are you sure you want to delete this comment?')">
                                                    <i class="fas fa-times"></i>
                                                </button>
                                            </form>
                                        {% endif %}
                                    </div>
                                    <p class="mb-0">{{ comment.content|linebreaksbr }}</p>
                                </div>
                            </div>
                        {% endfor %}
                    {% else %}
                        <p class="text-muted">No comments yet.</p>
                    {% endif %}
                    
                    <form method="post" action="{% url 'tasks:add-comment' task.pk %}" class="mt-4">
                        {% csrf_token %}
                        {{ comment_form|crispy }}
                        <button type="submit" class="btn btn-primary mt-2">
                            <i class="fas fa-comment"></i> Add Comment
                        </button>
                    </form>
                </div>
            </div>
            
            <!-- Attachments Section -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">Attachments</h5>
                </div>
                <div class="card-body">
                    {% if task.attachments.all %}
                        <div class="list-group mb-4">
                            {% for attachment in task.attachments.all %}
                                <div class="list-group-item d-flex justify-content-between align-items-center">
                                    <div>
                                        <i class="fas fa-file me-2"></i>
                                        <a href="{{ attachment.file.url }}" target="_blank">
                                            {{ attachment.filename }}
                                        </a>
                                        <small class="text-muted d-block">
                                            Uploaded by {{ attachment.uploaded_by.get_full_name|default:attachment.uploaded_by.username }} 
                                            {{ attachment.uploaded_at|timesince }} ago
                                        </small>
                                    </div>
                                    {% if attachment.uploaded_by == request.user or request.user.is_staff %}
                                        <form method="post" action="{% url 'tasks:delete-attachment' attachment.pk %}" class="d-inline">
                                            {% csrf_token %}
                                            <button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('Are you sure you want to delete this attachment?')">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </form>
                                    {% endif %}
                                </div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <p class="text-muted">No attachments yet.</p>
                    {% endif %}
                    
                    <form method="post" action="{% url 'tasks:upload-attachment' task.pk %}" enctype="multipart/form-data" class="mt-4">
                        {% csrf_token %}
                        {{ attachment_form|crispy }}
                        <button type="submit" class="btn btn-primary mt-2">
                            <i class="fas fa-upload"></i> Upload Attachment
                        </button>
                    </form>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">Task Details</h5>
                </div>
                <div class="card-body">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item d-flex justify-content-between">
                            <span>Status:</span>
                            <span class="text-capitalize">{{ task.get_status_display }}</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between">
                            <span>Priority:</span>
                            <span class="text-capitalize">{{ task.get_priority_display }}</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between">
                            <span>Created By:</span>
                            <span>{{ task.created_by.get_full_name|default:task.created_by.username }}</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between">
                            <span>Assigned To:</span>
                            <span>{{ task.assigned_to.get_full_name|default:task.assigned_to.username }}</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between">
                            <span>Due Date:</span>
                            <span>{{ task.due_date|date:"F j, Y"|default:"No due date" }}</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between">
                            <span>Created At:</span>
                            <span>{{ task.created_at|date:"F j, Y H:i" }}</span>
                        </li>
                        {% if task.completed_at %}
                        <li class="list-group-item d-flex justify-content-between">
                            <span>Completed At:</span>
                            <span>{{ task.completed_at|date:"F j, Y H:i" }}</span>
                        </li>
                        {% endif %}
                    </ul>
                </div>
            </div>
            
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Quick Actions</h5>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{% url 'tasks:task-update' task.pk %}" class="btn btn-outline-primary">
                            <i class="fas fa-edit me-2"></i>Edit Task
                        </a>
                        <form method="post" action="{% url 'tasks:task-complete' task.pk %}">
                            {% csrf_token %}
                            <button type="submit" class="btn {% if task.status == 'done' %}btn-outline-warning{% else %}btn-outline-success{% endif %} w-100">
                                <i class="fas {% if task.status == 'done' %}fa-undo{% else %}fa-check{% endif %} me-2"></i>
                                {% if task.status == 'done' %}Mark Incomplete{% else %}Mark Complete{% endif %}
                            </button>
                        </form>
                        <a href="{% url 'tasks:task-list' %}" class="btn btn-outline-secondary">
                            <i class="fas fa-list me-2"></i>Back to List
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}